<template>
	<div class="user-account">
		<el-form
			ref="accountForm"
			:model="account"
			label-width="80px"
			label-position="left"
		>
			<el-form-item label="Nickname">
				<el-input class="account-form-item" v-model.trim="account.nickname" />
			</el-form-item>
			<el-form-item label="Gender">
				<el-select class="account-form-item" v-model="account.gender">
					<el-option
						v-for="item in genderOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="Phone">
				<el-input
					class="account-form-item"
					v-model.trim="account.phone"
					disabled
				/>
				<el-button class="update" @click="update.phone.flag = true">
					Update
				</el-button>
				<el-button type="danger" @click="handleDeletePhone">
					Delete
				</el-button>
			</el-form-item>
			<el-form-item label="Email">
				<el-input
					class="account-form-item"
					v-model.trim="account.email"
					disabled
				/>
				<el-button class="update" @click="update.email.flag = true">
					Update
				</el-button>
				<el-button type="danger" @click="handleDeleteEmail">
					Delete
				</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleAccountUpdate">
					Update
				</el-button>
				<el-button @click="update.password.flag = true">
					Update Password
				</el-button>
			</el-form-item>
		</el-form>

		<el-dialog
			title="Update Phone"
			width="25%"
			:visible.sync="update.phone.flag"
			:before-close="confirmCancelPhone"
		>
			<el-form label-width="80px" label-position="left">
				<el-form-item label="Password">
					<el-input
						type="password"
						v-model="update.phone.password"
						:show-password="true"
					/>
				</el-form-item>
				<el-form-item label="Phone">
					<el-input v-model="update.phone.value" />
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="handleClosePhone">取 消</el-button>
				<el-button type="primary" @click="handleUpdatePhone">
					确 定
				</el-button>
			</span>
		</el-dialog>

		<el-dialog
			title="Update Email"
			width="25%"
			:visible.sync="update.email.flag"
			:before-close="confirmCancelEmail"
		>
			<el-form label-width="80px" label-position="left">
				<el-form-item label="Password">
					<el-input
						type="password"
						v-model="update.email.password"
						:show-password="true"
					/>
				</el-form-item>
				<el-form-item label="Email">
					<el-input v-model="update.email.value" />
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="handleCloseEmail">取 消</el-button>
				<el-button type="primary" @click="handleUpdateEmail">
					确 定
				</el-button>
			</span>
		</el-dialog>

		<el-dialog
			title="Update Password"
			width="30%"
			:visible.sync="update.password.flag"
			:before-close="confirmCancelPassword"
		>
			<el-form
				ref="passwordForm"
				label-width="120px"
				label-position="left"
				:model="update.password"
			>
				<el-form-item
					label="OldPassword"
					prop="oldPassword"
					:rules="formRules.password"
				>
					<el-input
						type="password"
						v-model="update.password.oldPassword"
						:show-password="true"
					/>
				</el-form-item>
				<el-form-item
					label="NewPassword"
					prop="newPassword"
					:rules="formRules.password"
				>
					<el-input
						type="password"
						v-model="update.password.newPassword"
						:show-password="true"
					/>
				</el-form-item>
				<el-form-item
					label="Confirm"
					prop="confirmPassword"
					:rules="formRules.confirm"
				>
					<el-input
						type="password"
						v-model="update.password.confirmPassword"
						:show-password="true"
					/>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="handleClosePassword">取 消</el-button>
				<el-button type="primary" @click="handleUpdatePassword">
					确 定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { accountService } from '@/services/security/Account';
	import { userService } from '@/services/authorization/User';
	import { ObjectUtil } from '@/utils/ObjectUtil';

	export default {
		props: {
			user: {
				type: Object,
				required: true
			}
		},
		data() {
			const validatePassword = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error('The password can not be less than 6 digits'));
				} else {
					callback();
				}
			};
			const validateConfirm = (rule, value, callback) => {
				if (value !== this.update.password.newPassword) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				account: ObjectUtil.clone(this.user),
				update: {
					phone: {
						flag: false,
						password: null,
						value: null
					},
					email: {
						flag: false,
						password: null,
						value: null
					},
					password: {
						flag: false,
						oldPassword: null,
						newPassword: null,
						confirmPassword: null
					}
				},
				formRules: {
					password: [
						{ required: true, trigger: 'blur', validator: validatePassword }
					],
					confirm: [
						{ required: true, trigger: 'blur', validator: validateConfirm }
					]
				},
				genderOptions: [
					{
						label: '男',
						value: false
					},
					{
						label: '女',
						value: true
					}
				]
			};
		},
		methods: {
			handleAccountUpdate() {
				userService
					.update(ObjectUtil.clone(this.account))
					.then(() => {
						return this.$store.dispatch('account/upgrade');
					})
					.then(() => {
						this.$message({
							message: 'User information has been updated successfully',
							type: 'success',
							duration: 5 * 1000
						});
					})
					.catch(e => {
						this.$message.error(e.message);
					});
			},
			handleUpdatePhone() {
				accountService
					.upgradePhone(this.update.phone.password, this.update.phone.value)
					.catch(e => {
						this.$message.error(e.message);
					})
					.finally(() => {
						this.update.phone.password = null;
						this.update.phone.value = null;
						this.update.phone.flag = false;
					});
			},
			handleUpdateEmail() {
				accountService
					.upgradeEmail(this.update.email.password, this.update.email.value)
					.catch(e => {
						this.$message.error(e.message);
					})
					.finally(() => {
						this.update.email.password = null;
						this.update.email.value = null;
						this.update.email.flag = false;
					});
			},
			handleUpdatePassword() {
				this.$refs.passwordForm.validate(valid => {
					if (valid) {
						accountService
							.upgradePassword(
								this.update.password.oldPassword,
								this.update.password.newPassword
							)
							.catch(e => {
								this.$message.error(e.message);
							})
							.finally(() => {
								this.update.password.oldPassword = null;
								this.update.password.newPassword = null;
								this.update.password.confirmPassword = null;
								this.update.password.flag = false;
							});
					}
				});
			},
			handleClosePhone() {
				this.update.phone.password = null;
				this.update.phone.value = null;
				this.update.phone.flag = false;
			},
			handleCloseEmail() {
				this.update.email.password = null;
				this.update.email.value = null;
				this.update.email.flag = false;
			},
			handleClosePassword() {
				this.update.password.oldPassword = null;
				this.update.password.newPassword = null;
				this.update.password.confirmPassword = null;
				this.update.password.flag = false;
			},
			confirmCancelPhone(done) {
				this.$confirm('确认关闭？')
					.then(() => {
						this.update.phone.password = null;
						this.update.phone.value = null;
						done();
					})
					// eslint-disable-next-line
					.catch(() => {
					});
			},
			confirmCancelEmail(done) {
				this.$confirm('确认关闭？')
					.then(() => {
						this.update.email.password = null;
						this.update.email.value = null;
						done();
					})
					// eslint-disable-next-line
					.catch(() => {
					});
			},
			confirmCancelPassword(done) {
				this.$confirm('确认关闭？')
					.then(() => {
						this.update.password.oldPassword = null;
						this.update.password.newPassword = null;
						this.update.password.confirmPassword = null;
						done();
					})
					// eslint-disable-next-line
					.catch(() => {
					});
			},
			handleDeletePhone() {
				accountService.deletePhone().catch(e => {
					this.$message.error(e.message);
				});
			},
			handleDeleteEmail() {
				accountService.deleteEmail().catch(e => {
					this.$message.error(e.message);
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.user-account {
		.account-form-item {
			width: 30%;
		}

		.update {
			margin-left: 10px;
			/*color: #606266;*/
			/*background-color: #e0e0e0;*/
			/*border-color: #e0e0e0;*/

			/*&:hover {*/
			/*	color: #606266;*/
			/*	background-color: #e8e8e8;*/
			/*	border-color: #e8e8e8;*/
			/*}*/
		}

		.captcha {
			&:hover {
				color: #505050;
			}
		}
	}
</style>
